<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input allow-clear placeholder="请输入商品名称" v-model="queryParam.goods_name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="getList">
          <a-radio-button value=""> 全部 </a-radio-button>
          <a-radio-button value="0"> 待处理 </a-radio-button>
          <a-radio-button value="1"> 已发货 </a-radio-button>
          <a-radio-button value="2"> 已收货 </a-radio-button>
          <a-radio-button value="3"> 已拣货 </a-radio-button>
        </a-radio-group>
      </div>

      <OrderListTable ref="table" :orderList="list" @print="print" @triggerAction="triggerAction"></OrderListTable>

      <div style="float: right; margin-top: 10px">
        <el-pagination
          :current-page="queryParam.page"
          background
          layout="prev, pager, next"
          :total="totalCount"
          @current-change="(e) => tablePageChange(e)"
        >
        </el-pagination>
      </div>
      <a-modal
        title="物流信息"
        :mask-closable="false"
        :destroy-on-close="true"
        :width="700"
        v-model="order_export"
        @ok="exportExcel"
        okText="导出"
      >
        <div style="float: right">
          <a-button v-print="'#print'">打印</a-button>
        </div>
        <div id="print">
          <a-descriptions title="主体信息" v-if="print_order">
            <a-descriptions-item label="服务商">
              {{ print_order.admin_name }}({{ print_order.admin_tel }})
            </a-descriptions-item>
            <a-descriptions-item label="服务商地址">
              {{ print_order.admin_address }}
            </a-descriptions-item>
            <a-descriptions-item label="供货商">
              {{ print_order.supplier_name }}({{ print_order.supplier_tel }})
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions title="商品信息" v-if="print_order && print_order.goods"> </a-descriptions>
          <div v-if="print_order && print_order.goods">
            <a-table :pagination="false" :columns="columns" :data-source="print_order.goods">
              <span slot="goods_name" slot-scope="text, record">{{ text }}</span>
              <span slot="goods_attr" slot-scope="text">{{ text.attr_name }}</span>
              <span slot="goods_num" slot-scope="text">{{ text }}</span>
            </a-table>
          </div>
        </div>
      </a-modal>
    </a-card>

    <!-- <OrderPrintModal :visible.sync="isShowPrintModal" :order="orderInfo"></OrderPrintModal> -->
  </page-header-wrapper>
</template>

<script>
import { agentOrderDistributionList } from '@/api/purchase/supplier'
import { setDistributionStatus, exportDistributionInfo } from '@/api/purchase/purchase'
import OrderListTable from './components/OrderListTable.vue'
// import OrderPrintModal from './components/OrderPrint.vue'
const columns = [
  {
    title: '名称',
    dataIndex: 'goods_name',
    key: 'goods_name',
    width: 100,
  },
  {
    title: '规格',
    dataIndex: 'goods_attr',
    key: 'goods_attr',
    width: 80,
    customRender: (text) => {
      let str = ''
      for (let i in text) {
        str += text[i].attr_name + ' '
      }
      return str
    },
  },
  {
    title: '数量',
    dataIndex: 'goods_num',
    key: 'goods_num',
    width: 60,
  },
]
export default {
  components: {
    OrderListTable,
    // OrderPrintModal
  },
  data() {
    return {
      queryParam: {
        page: 1,
        limit: 10,
        status: '',
        price_type: '',
        low_price: '',
        high_price: '',
      },
      list: [],
      orderInfo: null,
      isShowPrintModal: false,
      exportUrl: '',
      print_order: null,
      order_export: false,
      columns,
    }
  },

  created() {
    this.getList()

    this.exportUrl = exportDistributionInfo()
  },

  methods: {
    exportExcel() {
      let url = `${this.exportUrl}&`
      url += `export=1&id=${this.print_order.id}`
      window.open(url, '_blank')
    },
    print(row) {
      console.log(row)
      this.order_export = true
      this.print_order = row
    },

    triggerAction({ type, order }) {
      this.setDistributionStatus(order.id, type)
    },

    setDistributionStatus(ids, status) {
      this.$confirm({
        title: '提示',
        content: '是否执行此次操作？',
        onOk: () => {
          setDistributionStatus({
            ids,
            status,
          }).then((res) => {
            if (!res.code) {
              this.tablePageChange(1)
              this.$message.success(res.msg)
              return
            }

            this.$message.error(res.msg)
          })
        },
        onCancel() {},
      })
    },

    // 分页请求
    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },

    // 获取数据
    async getList() {
      const hide = this.$message.loading('加载中...', 1000)
      const res = await agentOrderDistributionList(this.queryParam)
      if (res.code == 0) {
        let list = res.data.data || []

        list = list.map((el) => {
          let goods = el.goods

          goods.forEach((cel) => {
            if (cel.goods_attr) {
              cel.goods_attr = JSON.parse(cel.goods_attr)
            } else {
              cel.goods_attr = []
            }
          })

          return el
        })

        this.list = list
        this.totalCount = res.data.count
      }
      hide()
    },

    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.queryParam.start_time = e[0]
        this.queryParam.end_time = e[1]
      } else {
        this.queryParam.start_time = ''
        this.queryParam.end_time = ''
      }
    },
  },
}
</script>
<style lang="less" scoped>
.numberBox {
  display: flex;
  

  .item {
    display: flex;
    align-items: center;
  }
}
</style>
